<html>
    <head>
        <meta charset="utf-8">
        <title>Tetris by Team Coconut</title>
        <link href="css/coconut/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <link href="css/maincss.css" type="text/css" rel="stylesheet">
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.js"></script>
        <script src="localStorageHighScore/localStorageOperations.js"></script>
        <script src="shareButtons/shareButtons.js"></script>

        <script src="tetrisModel/shims/deepClone.js"></script>
        <script src="tetrisModel/shims/ClassicalOop.js"></script>
        <script src="tetrisModel/tetris.js"></script>
        <script src="tetrisModel/Vector2D.js"></script>
        <script src="tetrisModel/Block.js"></script>
        <script src="tetrisModel/_FallingObject.js"></script>
        <script src="tetrisModel/FallingL.js"></script>
        <script src="tetrisModel/FallingLReversed.js"></script>
        <script src="tetrisModel/FallingZ.js"></script>
        <script src="tetrisModel/FallingZReversed.js"></script>
        <script src="tetrisModel/FallingLine.js"></script>
        <script src="tetrisModel/FallingSquare.js"></script>
        <script src="tetrisModel/FallingT.js"></script>
        <script src="tetrisModel/Earth.js"></script>
        <script src="tetrisModel/CollisionType.js"></script>
        <script src="tetrisModel/CollisionDetector.js"></script>
        <script src="tetrisModel/Renderer.js" type="text/javascript"></script>
        <script src="tetrisModel/Factory.js" type="text/javascript"></script>
        <script src="tetrisModel/Engine.js"></script>

    </head>
    <body>
        <div id="mainbody" class="ui-widget-content ui-corner-all" align="center">
            <div class="gamename">
                <img src="img/text.png" alt="TETRIS"> 
            </div>
            <button class="button-width" id="start">START</button>
            <button class="button-width" id="options">OPTIONS</button>
            <button class="button-width" id="score">HIGHSCORE</button>
            <div class="logo">
                <img src="img/logo.png" alt="Team Coconut">
            </div>     
        </div>
        <script>
             //declare theme of the button
            $(function() {
                $(".button-width").button();
            });
            //navigation - load subfiles inside the main div
            $(document).ready(function() {
                $(".button-width").click(function() {
                    if ($(this).is('#start')) {
                        $("#mainbody").hide().load("game.html", function(response, status, xhr) {
                            if (status === "error") {
                                // handle error 
                            }
                            else
                            {
                                $(this).fadeIn();
                            }
                        });
                    }
                    else if ($(this).is('#options')) {
                        $("#mainbody").hide().load('options.html', function(response, status, xhr) {
                            if (status === "error") {
                                // handle error 
                            }
                            else
                            {
                                $(this).fadeIn();
                            }
                        });

                    }
                    else if ($(this).is('#score')) {
                        $("#mainbody").hide().load('score.html', function(response, status, xhr) {
                            if (status === "error") {
                                // handle error 
                            }
                            else
                            {
                                $(this).fadeIn();
                            }
                        });
                    }
                });
            });
        </script>
    <center>
         <div id="shareButtons"></div>
        <script>
            shareButtons.addAllButtons("#shareButtons");
        </script>   
    </center>
    </body>
</html>
